<template>
    <pos-dialog title="Customer" :visible="visible" @close="close">
        <div class="pos-customer-container">
            <div class="customer-current">
                <img :src="customer.avatar_url" class="avatar" alt="">
                <div class="name">{{ customer.last_name }} {{ customer.first_name }}({{ customer.email }})</div>
            </div>

            <div class="customer-info-box">
                <div class="customer-info-box__row"><strong>Name:</strong> {{ customer.last_name }}
                    {{ customer.first_name }}
                </div>
                <div class="customer-info-box__row" v-if="customer.billing">
                    <strong>Billing address:</strong>
                    <span>
                            {{ customer.billing.address_1 }}
                            {{ customer.billing.city }}
                            {{ customer.billing.country }}
                    </span>
                </div>
                <div class="customer-info-box__row" v-if="customer.shipping">
                    <strong>Shipping address:</strong>
                    <span>
                            {{ customer.shipping.address_1 }}
                            {{ customer.shipping.city }}
                            {{ customer.shipping.country }}
                    </span>
                </div>
                <div class="customer-info-box__error">
                    The following fields are required for billing details: first name, last name, email.
                </div>
                <div class="customer-info-box__error">
                    The following fields are required for shipping details: first name, last name.
                </div>
            </div>

            <div>
                <button class="btn btn-primary btn-block text-uppercase" @click="submit">Use this customer profile
                </button>
            </div>
        </div>
    </pos-dialog>
</template>

<script>
export default {
    name: "DialogCustomerInfo",
    props: {
        value: false,
        customer: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    data() {
        return {
            visible: false
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        create() {
        },
        submit() {
            this.$emit('submit', this.customer);
            this.close();
        }
    },
    mounted() {
        this.visible = this.value;
    }
}
</script>

<style scoped>

</style>